<template>
  <div>
    <h3 align="center">热门商品</h3>
    <div class="container">
      <div class="card" v-for="(goods, index) in goodsList" :key="index">
        <img :src="goods.image" class="card-img-top" alt="..." style="width: 200px" />
        <div class="card-body">
          <h5 class="card-title">{{ goods.name }}</h5>
          <p class="card-text"></p>
          <a href="#" class="btn btn-primary">购买</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsList } from '@/api/goods2'
export default {
  data() {
    return {
      goodsList: [],
    }
  },
  async mounted() {
    const res = await getGoodsList(11)
    this.goodsList = res.data
  },
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}
.card {
  margin-right: 20px;
  width: 30%;
  margin-top: 20px;
}
</style>
